<template >

  <el-container style="background-color: #001529;padding: 0;margin: 0;" >


    <el-main style="height: auto;padding: 0;margin: 0">

      <el-container style="padding: 0;margin: 0">

        <el-footer ref="footerWidth" style="background-color: #001529;margin: 0;overflow: hidden;padding-top: 22px"  class="align-bottom">

<!--          <el-scrollbar  >-->
<!--            <div class="scrollbar-flex-content">-->
<!--              <p v-for="item in 50" :key="item" class="scrollbar-demo-item">-->
<!--                {{ item }}-->
<!--              </p>-->
<!--            </div>-->
<!--          </el-scrollbar>-->
                <el-tabs
                    v-model="editableTabsValue"
                    type="border-card"
                    closable
                    class="demo-tabs"
                    @tab-remove="remove"
                    @tab-click="onChange"
                >

                        <el-tab-pane
                            v-for="pane in showPage"
                            :key="pane.menuId"
                            :label="pane.menuName"
                            :name="pane.menuId"
                        >
                      </el-tab-pane>

                </el-tabs>


        </el-footer>

      </el-container>


    </el-main>
    <el-aside style="background-color: #001529;" width="150px">


      <el-popover
          :show-after="1000"
          :width="250"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
      >
        <template #reference>
          <div style="margin: 0px;padding: 0px;height: 60px; line-height: 60px;">
            <el-text  size="large" class="mx-1" style="color: #ffd04b;-webkit-user-select: none;user-select:none"> <el-icon color="#ffd04b" size="20" ><UserFilled /></el-icon>  {{ loginUser.value.nickName }}</el-text>
          </div>

        </template>

        <template #default>
          <div
              class="demo-rich-conent"
              style="display: flex; gap: 16px; flex-direction: column;-webkit-user-select: none;user-select:none"
          >
            <el-avatar
                :size="60"
                :src="jiaoziBlack"
            />
            <div>
              <p
                  class="demo-rich-content__name"
                  style="margin: 0; font-weight: 500"
              >
                {{ loginUser.value.nickName }}
              </p>
              <p
                  class="demo-rich-content__mention"
                  style="margin: 0; font-size: 14px; color: var(--el-color-info)"
              >
                {{ loginUser.value.userName }}
              </p>
              <p class="demo-rich-content__desc" style="margin: 0">
                所在部门：{{ department.value.departmentName }}
              </p>
              <p class="demo-rich-content__desc" style="margin: 0">
                所属角色：  <template  v-for="item in roles.value"> {{item.roleName}}</template>
              </p>
            </div>

            <div class="mb-4">
              <el-button type="primary" size="small" >修改密码</el-button>
              <el-button type="danger" size="small"  @click="logOff">切换用户</el-button>
            </div>
          </div>
        </template>
      </el-popover>

    </el-aside>

  </el-container>


</template>

<script lang="ts" setup>
import jiaoziBlack from"@/assets/jiaozi.jpg"
import { ref ,onMounted,watch} from 'vue';
import {ElLoading, ElMessage} from "element-plus";
import request from "@/api/request";
import {v4}  from 'uuid';
let loginUser: any = defineModel('loginUser')
let department: any = defineModel('department')
let roles: any = defineModel('roles')
let showPage: any = defineModel('showPage')
let showMain: any = defineModel('showMain')
let tabs: any = ref();
let editableTabsValue: any = defineModel('editableTabsValue')

const emit = defineEmits(["logOff"]);
const footerWidth = ref(null);


// watch(showPage, (newValue, oldValue) => {
//       tabs.value = newValue.filter((tab) => tab.menuRoute !== '')
//
// });



// function onChange(targetKey: string | MouseEvent){
function onChange(tab: TabsPaneContext, event: Event){
  showPage.value.forEach((item => {
    if(item.menuId==tab.props.name){
      item.mainShow = true;
    }else{
      item.mainShow = false;
    }
  }))
  showMain.value.forEach((item => {
    if(item.menuId==tab.props.name){
      item.show = true;
    }else{
      item.show = false;
    }
  }))


}

// const remove = (targetKey: string) => {
const remove = (name) => {

  const tabs = showPage.value
  showPage.value = tabs.filter((tab) => tab.menuId !== name)

  if(showPage.value.length==0){
    showMain.value=[];
  }else{
    showMain.value.forEach((item,index) => {
      if(item.menuId==name){
        item.menuRoute='';
        item.menuId= v4();
        item.show=false;
      }
    })
  }

  console.log(showMain);
};

function logOff() {
  emit("logOff")
}



</script>
<style>


.mainShow .el-tag__close {
  color: #001529;
  margin-left: 2px;
  border-style:none;
  color:#001529;
  font-weight: bold;
  -webkit-user-select: none;
  user-select:none
}
.mainShow  {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  border-style:none;
  color:#001529;
  font-weight: bold;
  -webkit-user-select: none;
  user-select:none
}


.tagHover{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  border-style:none;
  -webkit-user-select: none;
  user-select:none
}
.tagHover:hover{
  color:#ffd04b;
}

.scrollbar-flex-content {
  margin-top: 27px;
  display: flex;
}

.el-tabs--border-card>.el-tabs__header {
  background-color: #001529;

}

.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
  color: #ffd04b;
}

.el-tabs--border-card {
   background: #001529;
   border: 0px solid var(--el-border-color);
}


.el-tabs--border-card>.el-tabs__header {
  background-color: #001529;
  border-bottom: 0px solid var(--el-border-color-light);
  margin: 0;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item {
  color: #ffffff;
}
</style>
